<template>
	<custom-page title="服务门店" borderBottomColor="transparent" backgroundColor="#F9F9F9">
		<template #page>
			<view class="page-content">
				<view class="search-layout">
					<view class="input-row">
						<image class="search-img" :src="asserts.ic_search"></image>
						<input class="input-content" placeholder="请输入门店名称查找" v-model="name"/>
						<view class="btn-search" @click="searchClick">搜索</view>
					</view>
				</view>
				<common-list-view ref="storeList" class="list-view" :enableLoadMore="true" :enableRefresh="true" :hasNoDataHolder="true"
					@listinit="onListInit($event)">
					<template #content='{datas}'>
						<assistant-store-item v-for="(item, index) in datas" :itemData="item" @storeClick="storeClick(item)"></assistant-store-item>
					</template>
				</common-list-view>
			</view>
		</template>
	</custom-page>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
			}
		},
		methods: {
			//列表加载
			onListInit(event){
				event.target.loadPageData = ({start, pageSize, showLoading = false}) => {
					let params = {
						current: start,
						pageSize: pageSize,
						name: this.name,
					}
					return this.requestCenter.getPollHallPageList(params)
					.then(res => {
						return Promise.resolve({ 
							curPage: start,
							pageCount: res.pages || 1,
							datas: res.records || []
						})
					})
				}
			},
			
			//点击搜索
			searchClick(){
				this.$refs.storeList.triggerLoadData({start: 1, showLoading: true})
			},
			
			//门店点击
			storeClick(item){
				uni.navigateTo({
					url: `/pages/assistant-store-detail/assistant-store-detail?userId=${this.userId}&pollId=${item.id}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.list-view{
		flex: 1;
		overflow: hidden;
	}
	.search-layout{
		display: flex;
		flex-direction: row;
		padding: 12rpx 32rpx;
		box-sizing: border-box;
		background-color: white;
		.input-row{
			width: 100%;
			height: 72rpx;
			background: #EEEEEE;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			border: 2rpx solid #EAEAEA;
			display: flex;
			flex-direction: row;
			align-items: center;
			.search-img{
				width: 32rpx;
				height: 32rpx;
				margin-left: 32rpx;
				margin-right: 16rpx;
			}
			.input-content{
				flex: 1;
				font-size: 28rpx;
				height: 100%;
			}
			.btn-search{
				width: 128rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: #01CBFF;
				border-radius: 36rpx 36rpx 36rpx 36rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
	.filter-layout{
		display: flex;
		flex-direction: row;
		background-color: white;
		height: 88rpx;
		.filter-item{
			flex: 1;
			font-size: 28rpx;
			color: #021624;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			image{
				width: 12rpx;
				height: 12rpx;
				margin-top: 12rpx;
				margin-left: 6rpx;
			}
		}
	}
</style>
